/* CSS Document */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "蚔打扑永弁极", YuGothic, "蚔打扑永弁 Medium", "Yu Gothic Medium", "蚔打扑永弁", "Yu Gothic", sans-serif;
  position: relative;
}

.main-title span {
  font-size: 60px;
  font-family: "Times New Roman";
  font-weight: normal;
}

/*======================
header
======================*/
header {
  position: relative;
}

.header_logo_white {
  position: absolute;
  left: 10%;
  top: 40px;
}

/*======================
main
======================*/
main {
  background: #F0F0F0;
}

/*丟奶件申斥亙失伙*/
.main-visual {
  background: url("/iron/centers/img/main-visual.png") no-repeat top center;
  background-size: cover;
  height: 519px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hgroup {
  max-width: 850px;
  width: 100%;
  padding: 30px 40px 50px;
  text-align: center;
  color: #fff;
  background: rgba(13, 61, 23, 0.6);
  box-sizing: border-box;
  font-weight: bold;
}

.main-title {
  font-size: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #fff;
  margin-bottom: 20px;
  font-weight: bold;
  max-width: 730px;
  width: 100%;
  margin: 0 auto 20px;
}

.hgroup-bottom {
  font-size: 18px;
}

/*由件仁內伉旦玄*/
.breadcrumbs {
  width: 95%;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.breadcrumbs a {
  text-decoration: underline;
}
.breadcrumbs a:hover {
  text-decoration: none;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  margin: 0 10px;
}
.breadcrumbs li:nth-last-child(1)::after {
  content: inherit;
}

/*煾謹旃噶本件正奈衙猁*/
.about {
  padding: 45px 0 190px;
  box-sizing: border-box;
}

.about-box {
  max-width: 1110px;
  width: 100%;
  margin: auto;
  display: flex;
}

.about-txt-box {
  position: relative;
  min-width: 757px;
  width: 100%;
  padding: 25px 40px 40px 25px;
  background: #266734;
  transform: translate(-70px,75px);
  z-index: 1;
  box-shadow: 0px 3px 6px #00000029;
  box-sizing: border-box;
}

.about-txt-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 10px;
  bottom: 10px;
  background: #fff;
  z-index: -1;
  box-shadow: 0px 3px 6px #00000029;
}

.about-txt-box {
  line-height: 1.8;
}

.sec-title01 {
  font-size: 29px;
  color: #126323;
  font-weight: bold;
  margin-bottom: 20px;
}

.nav-btn-list {
  max-width: 1110px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 135px auto 0;
}

.nav-btn {
  position: relative;
  max-width: 541px;
  width: 100%;
  padding: 21px 35px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 3px 6px #00000029;
  line-height: 1.8;
}

.nav-btn a {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.nav-btn:hover {
  opacity: 0.8;
}

.nav-btn::after {
  content: "";
  min-width: 10px;
  min-height: 10px;
  width: 10px;
  height: 10px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: rotate(135deg);
}

.nav-btn-box {
  color: #fff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding-left: 70px;
}

.nav-btn-title {
  font-size: 20px;
  font-weight: bold;
}

.nav-btn:nth-child(1) {
  background-color: #31705A;
  background-image: url("/iron/centers/img/icon-01.png");
  background-position: left 30px center;
  background-repeat: no-repeat;
}

.nav-btn:nth-child(2) {
  background-color: #769A52;
  background-image: url("/iron/centers/img/icon-02.png");
  background-position: left 30px center;
  background-repeat: no-repeat;
}

/*煾謹腔旃噶薆郖*/
.strategy {
  background: url("/iron/centers/img/contents-img02.png") center center no-repeat;
  background-size: cover;
  padding-bottom: 100px;
  margin-bottom: 170px;
}

.sec-title-box {
  max-width: 1024px;
  width: 100%;
  height: 215px;
  margin: 0 auto -40px;
  padding: 30px 50px;
  box-sizing: border-box;
  box-shadow: 6px 9px 12px #00000073;
  color: #0D3D17;
  background: #fff;
  transform: translateY(-90px);
  display: flex;
}

.sec-title-box::before {
  content: "";
  background: url("/iron/centers/img/icon-03.png");
  width: 45px;
  height: 63px;
  margin-right: 20px;
}

.strategy .sec-title-box {
  border-top: 18px solid #0D3D17;
  border-image: linear-gradient(to right, #0E3616 0%, #0D3D17 34%, #009441 58%, #7BE4A9 100%);
  border-image-slice: 1;
}

.hgroup2 {
  display: flex;
  flex-direction: column;
}

.hgroup2 p {
  line-height: 2;
}

.sec-title02 {
  font-family: '蚔隴陳 Medium','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 5px;
}

a.circle-link-btn {
  max-width: 389px;
  width: 100%;
  border: 2px solid #174B21;
  border-radius: 25px;
  padding: 8px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #0D3D17;
  box-sizing: border-box;
  margin-top: 15px;
}

a.circle-link-btn:hover {
  text-decoration: none;
  background:rgba(0,148,65,0.2);
}

.circle-link-btn::after {
  content: "";
  min-width: 8px;
  min-height: 8px;  
  width: 8px;
  height: 8px;
  border-top: 2px solid #0D3D17;
  border-right: 2px solid #0D3D17;
  transform: rotate(45deg);
}

.detail-btn-list {
  max-width: 1024px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  margin: auto;
}

.detail-btn-box {
  position: relative;
  width: 503px;
  padding: 13px;
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 5px 6px #00000042;
  box-sizing: border-box;
}

.detail-btn-box a {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.detail-btn-box:hover {
  opacity: 0.9;
}

.detail-btn-txt {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 13px 0;
  box-sizing: border-box;
}

.detail-btn-title {
  font-size: 20px;
  font-weight: bold;
}

.detail-link-txt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #0D543B;
  font-weight: bold;
}

.detail-link-txt::after {
  content: "";
  min-width: 6px;
  min-height: 6px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #0D543B;
  border-right: 2px solid #0D543B;
  transform: rotate(45deg);
  margin-left: 10px;
}

/*奶件平亙矛奈扑亦件旃噶弘伙奈皿*/
.incubation {
  background: url("/iron/centers/img/contents-img03.png") center center no-repeat;
  background-size: cover;
  padding-bottom: 100px;
}

.incubation .sec-title-box {
  border-top: 18px solid #0D3D17;
  border-image: linear-gradient(to right, #0E3616 0%, #0D3D17 47%, #91B123 78%, #BCDB53 100%);
  border-image-slice: 1;
  align-items: center;
}

.incubation .sec-title-box::before {
  background: url("/iron/centers/img/icon-04.png");
  width: 59px;
  height: 69px;
}
/*======================
footer
======================*/
.footer_n .fn_top {
  height: auto;
  background: #fff;
  box-sizing: border-box;
}

.footer_n .fn_top .fn_logo {
  padding: 80px 0 60px;
}

.footer_n .fn_top ul.fn_link_list li, .footer_n .fn_top ul.fn_link_list li a {
  color: #0D3D17;
  font-size: 13px;
}

.footer_n .fn_top ul.fn_link_list li a:hover {
  text-decoration: underline #0D3D17;
}

@media screen and (max-width: 700px) {

  /*======================
  header
  ======================*/
  .header_logo_white {
    position: absolute;
    left: 3%;
    top: 3px;
  }
  .float_menu {
    position: absolute;
  }
  
  /*======================
  main
  ======================*/
  
  /*丟奶件申斥亙失伙*/
  .main-visual {
    height: 430px;
  }
  
  .hgroup {
    width: 90%;
    padding: 5%;
    box-sizing: border-box;
    margin-top: 50px;
  }
  
  .main-title {
    font-size: 24px;
  }
  
  .main-title span {
    display: inline-block;
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
  }
  
  .hgroup-bottom {
    font-size: 16px;
  }
  
  /*煾謹旃噶本件正奈衙猁*/
  .about {
    padding: 45px 0 160px;
  }
  
  .about-box {
    flex-wrap: wrap;
    width: 90%;
  }
  
  .about-box img {
    padding-right: 5%;
    box-sizing: border-box;
  }
  
  .about-txt-box {
    min-width: auto;
    width: calc(100% - 10px);
    transform: translate(7.5%,-60px);
    padding: 5% 5% 10% 5%;
  }

  .sec-title01 {
    font-size: 24px;
  }

  .nav-btn-list {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    gap: 15px;
  }
  
  .nav-btn {
    padding: 15px;
  }
  
  .nav-btn:nth-child(1) {
    background-image: url("/iron/centers/img/icon-01_sp.png");
    background-position: left 15px center;
    background-repeat: no-repeat;
  }
  
  .nav-btn:nth-child(2) {
    background-image: url("/iron/centers/img/icon-02_sp.png");
    background-position: left 15px center;
    background-repeat: no-repeat;
  }
  
  .nav-btn-box {
    padding-left: 45px;
  }
  
  .nav-btn-title {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  /*煾謹腔旃噶薆郖*/
  .sec-title-box {
    width: 90%;
    padding: 5%;
    height: auto;
  }
  
  .hgroup2 {
    width: calc(100% - 55px);
  }
  
  .hgroup2 p {
    line-height: 1.5;
  }
  
  .sec-title02 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .detail-btn-list {
    width: 90%;
    flex-direction: column;
  }
  
  .detail-link-txt {
    font-size: 13px;
  }
  
  .detail-btn-box {
    width: 100%;
  }
  
  .detail-btn-txt {
    padding: 0 13px 0 0;
  }
  
  .detail-btn-box img {
    width: 50%;
  }
  
  .detail-btn-title {
    font-size: 16px;
  }
  
  /*奶件平亙矛奈扑亦件旃噶弘伙奈皿*/
  .strategy {
    padding-bottom: 60px;
    margin-bottom: 145px;
  }
  
  /*======================
  footer
  ======================*/
  .footer_n .fn_top {
    height: auto;
  }
}

@media screen and (orientation: portrait) and (min-width: 768px){
  a.circle-link-btn {
    max-width: 400px;
  }
  .footer_n .fn_top ul.fn_link_list {
    width: 90%;
    margin: auto;
    flex-wrap: wrap;
  }
}